<template>
  <div class="accountDetail" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="明细详情" background-color="linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%)"></myHead>
    <div class="account">
      <div class="top">
        <div class="user">
          <div class="userImg">
            <img src="../../../static/img/uhead.jpg" alt="" />
          </div>
          <div class="userName">包包</div>
        </div>
        <div class="money">+200.00</div>
        <div class="status">交易成功</div>
      </div>
      <div class="bot">
        <div class="list">
          <div class="name">商    品</div>
          <div class="content">外卖订单-菜皮</div>
        </div>
        <div class="list">
          <div class="name">付款方式</div>
          <div class="content">微信支付</div>
        </div>
        <div class="list">
          <div class="name">支付时间</div>
          <div class="content">2019-4-12 12:28</div>
        </div>
        <div class="list">
          <div class="name">到账时间</div>
          <div class="content">2019-4-12 12:40</div>
        </div>
        <div class="list">
          <div class="name">交易单号</div>
          <div class="content">20191234564789456123015564445455</div>
        </div>
        <div class="list">
          <div class="name">订单号</div>
          <div class="content">20191234564789456123015564445455</div>
        </div>
      </div>
    </div>
    <div class="another">
      <router-link tag="div" class="list" to="/views/Business/problem">
        <span>常见问题</span>
        <van-icon name="arrow" color="#999999" size="17" />
      </router-link>
      <div class="list">
        <span>对此账单有疑问联系客服？</span>
        <van-icon name="arrow" color="#999999" size="17" />
      </div>
    </div>
  </div>
</template>

<script>
    import myHead from "../../components/BusinessComponents/lib/myHead";
    import Vue from 'vue';
    import { Icon } from 'vant';

    Vue.use(Icon);

    export default {
        name: "accountDetail",
        components: {
          myHead
        },
    }
</script>

<style scoped>
  img{
    width: 100%;
  }
  .accountDetail{
    background: #F5F5F5;
    padding-top: .5rem;
  }
  .accountDetail .account{
    background: #ffffff;
  }
  .accountDetail .account .top{
    padding-top: .15rem;
  }
  .accountDetail .account .top .user{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .accountDetail .account .top .user .userImg{
    width: .38rem;
    height: .38rem;
    border-radius: .19rem;
    overflow: hidden;
  }
  .accountDetail .account .top .user .userName{
    margin-left: .12rem;
    color: #080404;
    font-size: .14rem;
  }
  .accountDetail .account .top .money{
    margin-top: .05rem;
    color: #130A13;
    font-size: .3rem;
    text-align: center;
  }
  .accountDetail .account .top .status{
    margin-top: .1rem;
    color: #D4D4D4;
    font-size: .14rem;
    text-align: center;
  }
  .accountDetail .account .bot{
    margin: .06rem .13rem 0;
    border-top: 1px solid #F5F5F5;
    padding-top: .1rem;
  }
  .accountDetail .account .bot .list{
    display: flex;
    font-size: .14rem;
    padding: .1rem 0;
    color: #333333;
  }
  .accountDetail .account .bot .list .name{
    margin-right: .14rem;
    color: #999999;
    width: .6rem;
  }
  .accountDetail .another{
    background: #ffffff;
    margin-top: .1rem;
  }
  .accountDetail .another .list{
    padding: .2rem .14rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #F5F5F5;
    font-size: .14rem;
    color: #333333;
  }
</style>
